{game.name} Speedrun by {run.players.map(p => p.name).join(" & ")} ( {run.srcId})

import { useQuery } from "@apollo/react-hooks"; import gql from "graphql-tag"; import { NextPage } from "next"; import Link from "next/link"; import { useRouter } from "next/router"; import Head from "next/head"; import React from "react"; import YouTube from "react-youtube"; import * as schema from "~/components/schema"; import styles from "~/components/styles.module.scss"; import { withApollo, DEBUG } from "~/components/hooks/with-apollo"; import RunDuration from "~/components/duration"; import RunPlayers from "~/components/run-players"; import RunDate from "~/components/run-date"; import useProgressIndicator from "~/components/hooks/use-nprogress"; import LoadingBlock from "~/components/loading-block"; import RunLinks from "~/components/run-links"; const RunPage: NextPage = () => { const router = useRouter(); const { loading, error, data } = useQuery(GetRunPage, { variables: { gameSrcSlug: router.query.game, runSrcId: router.query.runSrcId, }, fetchPolicy: DEBUG ? "cache-and-network" : "cache-first", }); useProgressIndicator(loading); if (!data) { return <>{error ? JSON.stringify(error) : }; } const game = data.game; const run = data.run; if (!game || !run) { // TODO: also verify that the run belongs to this game return <>run not found; } return (

{game.name}

Run {run.srcId} on {run.level?.name ?? "full game"} ( {run.category.name})

in by{" "} on

{run.videos .filter(video => /youtu/.test(video)) .map(video => (

))}

); }; export default withApollo(RunPage); const GetRunPage = gql` query GetRunPage($gameSrcSlug: String!, $runSrcId: ID!) { game(slug: $gameSrcSlug) { id srcId slug srcSlug name } run(srcId: $runSrcId) { id srcId timeMs videos category { id srcId name } level { id srcId srcSlug name } date players { name isGuest user { id srcId slug } } } } `;